<template>
    <div class="publish">
        <el-form ref="form" :model="form">
            <!-- 文章标题 -->
            <el-form-item>
                <el-input v-model="form.title" placeholder="请输入文章标题，标题字数不大于20字" ></el-input>
            </el-form-item>

            <!-- 文章内容 -->
            <el-form-item>
                <div id="editor"></div>
            </el-form-item>

            <!-- 文章来源 -->
            <el-form-item>
                <el-radio-group v-model="form.source">
                    <el-radio label="原创"></el-radio>
                    <el-radio label="转载"></el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item style="text-align: center">
                <el-button :disabled="stop" type="primary" @click="publish">确认发布</el-button>
            </el-form-item>


        </el-form>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { article_img } from '../../../utils/config'
import Editor from 'wangeditor'
import { publish } from '../../../http/article'
export default {
    data() {
        return {
            form: {
                title: "",
                content: "",
                source: "原创",
                author: ""
            },
            editor: null,
            stop: false
        };
    },
    computed: {
        ...mapGetters(['user'])
    },
    mounted() {
        this.form.author = this.user.username

        this.editor = new Editor('#editor')

        // 富文本编译器高度
        this.editor.config.height = 530
        // 图片上传地址
        this.editor.config.uploadImgServer = article_img
        // 最多上传1张图片
        this.editor.config.uploadImgMaxLength = 1
        // 图片上传的字段名称
        this.editor.config.uploadFileName = 'editor'
        // 请求头
        this.editor.config.uploadImgHeaders = {
            authorization: 'Bearer ' + sessionStorage.getItem('token')
        }
        this.editor.config.placeholder = "请输入文章内容"

        this.editor.create()
    },
    methods: {
        publish() {
            
            this.form.title = this.form.title.trim()
            if (!this.form.title) {
                return this.$message.warning('请输入文章标题！')
            }

            if (this.form.title.length > 20) {
                return this.$message.warning('文章标题字数不能大于20字！')
            }

            if (!this.editor.txt.html()) {
                return this.$message.warning('请输入文章内容！')
            }
            this.form.content = this.editor.txt.html()

            this.stop = true

            publish(this.form).then(res => {
                if (res.status) {
                    this.handleTop()
                } else {
                    this.handleTop()
                }
            })
        },

        handleTop() {
            setTimeout(() => {
                this.stop = false
            }, 1500);
        }


    }
};
</script>

<style lang="less" scoped>
.publish {
    display: flex;
    justify-content: center;
    color: #000;

    .el-form {
        width: 65%;
    }
}
</style>